<script lang="ts" setup>
	import { ref, reactive } from "vue";
	import {
		onShow,
		onHide,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		userStore
	} from '@/pinia';
	import * as im from '@/common/im.js';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let labelObj1 = reactive({
		storeStatus: '店铺状态',
		roomNum: '房间数',
		storeType: '店铺类型',
		isSettle: '物业费是否结清',
		storeRound: '周围商圈',
		address: '详细地址'
	})
	let labelObj2 = reactive({
		price: '价格',
		deviceType: '仪器类型',
		newOldStatus: '仪器设备新旧程度',
		yearNum: '使用年限',
		storeStatus: '店铺状态',
		address: '详细地址'
	})
	let labelObj3 = reactive({
		storeStatus: '店铺状态',
		roomNum: '房间数',
		storeType: '店铺类型',
		isSettle: '物业费是否结清',
		storeRound: '周围商圈',
		vipNum: '会员数',
		workDevice: '办公设备',
		deviceNum: '仪器数量',
		staffNum: '现有员工',
		newOldStatus: '仪器设备新旧程度',
		address: '详细地址'
	})
	let detailData = ref({})
	let keysArr = ref([])
	let labelUse = ref({})
	let listId = ref()
	let serviceType = ref()
	let collect = ref()
	let like = ref()
	onLoad((options) => {
		getDetail(options.id)
		listId.value = options.id
		serviceType.value = options.serviceType
		console.log(serviceType.value, "打印服务类型")
	})
	onUnload(() => {
		if (isDel.value) {
			uni.$off('serviceLike')
		} else {
			uni.$emit('serviceLike', {
				like: like.value,
				likeNum: detailData.value.likeNum,
				collect: collect.value,
				collectNum: detailData.value.collectNum
			})
		}
	})
	const getDetail = (id) => {
		proxy.$req('GET', proxy.$api.queryZhuanrangDetail, {
			userId: userStoreInfo.userInfo.id,
			id,
		}).then((res) => {
			console.log(res);
			if (!res.success) {
				return
			}
			detailData.value = res.result.roomTransfer
			collect.value = res.result.collect
			like.value = res.result.like
			if (res.result.roomTransfer.serviceId == '21') {
				keysArr.value = Object.keys(labelObj1)
				labelUse.value = labelObj1
			} else if (res.result.roomTransfer.serviceId == '22') {
				keysArr.value = Object.keys(labelObj2)
				labelUse.value = labelObj2
			} else if (res.result.roomTransfer.serviceId == '23') {
				keysArr.value = Object.keys(labelObj3)
				labelUse.value = labelObj3
			}
		})
	}
	const goBianji = () => {
		// proxy.$req('GET', proxy.$api.queryZhuanrangDetail, {
		// 	id,
		// }).then((res) => {

		// })
		router.push({
			name: 'pushMakeover',
			params: {
				listId: listId.value
			}
		})
	}
	let delShow = ref(false)
	let isDel = ref(0)
	const deleteMeth = () => {
		proxy.$req('POST', proxy.$api.deleteService2, {
			id: listId.value
		}).then((res) => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				isDel.value = 1
				uni.$emit('serviceRefash')
				router.back()
			}
		})
	}
	//点赞收藏
	const likeAndCollect = (type1, type2) => {
		proxy.$req('POST', proxy.$api.likeAndCollect, {
			id: listId.value,
			moduleType: 7,
			operateType: type1,
			updateType: type2,
			serviceType: serviceType.value,
			userId: userStoreInfo.userInfo.id
		}).then((res) => {
			console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				// getDetail(listId.value)
				if (type1 == 0 && type2 == 'like') {
					like.value = 1
					detailData.value.likeNum++
				} else if (type1 == 0 && type2 == 'unlike') {
					like.value = null
					detailData.value.likeNum--
				} else if (type1 == 1 && type2 == 'collect') {
					collect.value = 1
					detailData.value.collectNum++
				} else if (type1 == 1 && type2 == 'uncollect') {
					collect.value = null
					detailData.value.collectNum--
				}
			}
		})
	}
	const call = (e) => {
		uni.makePhoneCall({
			phoneNumber: e
		})
	}
	// 聊一聊
	const toIm = () => {
		const { memberId } = detailData.value;

		const userId = userStoreInfo.userInfo.id;
			
		if(userId == memberId){
			alert("不能和自己聊天");
			return ;
		}
		console.log('店铺转让state.detailsData', detailData.value);
		// #ifdef APP-PLUS
		im.init({
			imFlag: 'localService',
			toUserId: memberId,
		}, () => {
			router.push({
				// name: 'ConversationListPage',
				name: 'ConversationPage',
			})
		})
		// #endif
	}
</script>
<template>
	<view class="navSearch" :style="{background:`url(${JSON.parse(detailData.images)[0].url})`,
			backgroundSize:'100% 100%',
			backgroundRepeat:'no-repeat',
	}" v-if="detailData.hasOwnProperty('images')">
		<u-navbar :placeholder="true" leftText="" title="" bgColor="rgba(0,0,0,0)" auto-back :fixed="false"></u-navbar>
	</view>
	<u-modal :showConfirmButton="false" width="540rpx" :show="delShow" title="提示">
		<view class="modalDel">
			<view class="del">
				确定要删除吗？
			</view>
			<view class='delFoot'>
				<button class="btn1" @click="delShow = false">取消</button>
				<button class="btn2" @click="deleteMeth()">确定</button>
			</view>
		</view>

	</u-modal>
	<view class="mdNav">
		<view class="mdnTit u-line-3">
			{{ detailData.title }}
		</view>
		<view class="mdnCon">
			<view class="" @click="likeAndCollect(0,like==null?'like':'unlike')">
				<u-icon :name="like?'thumb-up-fill':'thumb-up' " :color="like?'#CB645E':'' "></u-icon>
				<text class="haha" :style="{color:like?'#CB645E':''}">{{ detailData.likeNum>0?detailData.likeNum:0 }}</text>
			</view>
			<view class="" @click="likeAndCollect(1,collect==null?'collect':'uncollect')">
				<u-icon :name="collect?'heart-fill':'heart'" :color="collect?'#CB645E':'' "></u-icon>
				<text class="haha"
					:style="{color:collect?'#CB645E':''}">{{ detailData.collectNum>0?detailData.collectNum:0 }}</text>
			</view>
			<view class="">
				<u-icon name="eye"></u-icon>
				<text class="haha">{{ detailData.viewNum }}</text>
			</view>
		</view>
	</view>
	<view class="makeoverCon">
		<view class="mcTit r-flex-around-center" v-if="detailData.depositMoney">
			<view class="c-flex-center-center aa">
				<text>{{ detailData.depositMoney }}</text>
				<text>押金</text>
			</view>
			<view class="c-flex-center-center aa">
				<text>{{ detailData.roomZujin }}</text>
				<text>房租</text>
			</view>
			<view class="c-flex-center-center aa">
				<text>{{ detailData.roomArea }}</text>
				<text>面积</text>
			</view>
		</view>
		<view class="mcIntro c-flex-start-start">
			<view class="mciItem r-flex-between-center" v-for="(item,index) in keysArr" :key="index">
				<text>{{labelUse[item] }}:</text>
				<text>{{ detailData[item] }}</text>
			</view>
		</view>
	</view>
	<view class="btmBtn" v-if="userStoreInfo.userFlag == 2 && detailData.memberId == userStoreInfo.userInfo.id">
		<view class="bbItem" @click="goBianji">
			编辑
		</view>
		<view class="bbItem" @click="delShow=true">
			删除
		</view>
	</view>
	<view class="btmBtn" v-else>
		<view class="bbItem" @click="toIm">
			在线咨询
		</view>
		<view class="bbItem" @click="call(detailData.contactPhone)">
			拨打电话
		</view>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.navSearch {
		width: 100%;
		height: 450rpx;
		// background-color: #e7e7e7;
	}

	.mdNav {
		box-sizing: border-box;
		width: 100%;
		padding: 32rpx;
		height: 224rpx;
		background-color: #FFFFFF;
		margin-bottom: 32rpx;

		.mdnTit {
			min-height: 88rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;
			font-weight: 600;
			color: #000000;
		}

		.mdnCon {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			view {
				display: flex;
				justify-content: center;
				align-items: center;

				.haha {
					font-size: 28rpx;
					margin-right: 90rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.makeoverCon {
		box-sizing: border-box;
		width: 686rpx;
		margin: 10rpx auto 0;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 64rpx 32rpx 48rpx;

		.mcTit {
			margin-bottom: 20rpx;

			.aa {
				text:nth-child(1) {
					font-size: 40rpx;
					font-weight: 600;
					color: #000000;
					margin-bottom: 20rpx;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
				}
			}
		}

		.mcIntro {
			width: 100%;
			flex-wrap: wrap;

			.mciItem {
				margin: 18rpx 0;
				width: 100%;


				text:nth-child(1) {
					display: inline-block;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}

				text:nth-child(2) {
					display: inline-block;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
					text-align: right;
				}
			}
		}
	}

	.btmBtn {
		width: 100%;
		height: 144rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);

		.bbItem {
			width: 326rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 16rpx;
			text-align: center;
		}

		.bbItem:nth-child(1) {
			background: rgba(255, 255, 255, 0);
			border: 2rpx solid #CB645E;
			color: #CB645E;
		}

		.bbItem:nth-child(2) {
			color: #FFFFFF;
			background: #CB645E;
		}
	}

	.modalDel {
		.del {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		.delFoot {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.btn1 {
				width: 206rpx;
				height: 88rpx;
				background: rgba(255, 255, 255, 0);
				border: 2rpx solid #CB645E;
				color: #CB645E;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}

			.btn2 {
				width: 206rpx;
				height: 88rpx;
				background: #CB645E;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}
		}
	}
</style>